<template>  
  <div class="repair-page">  
    <!-- 顶部导航 -->  
    <header class="header">  
      <div class="header-back" @click="goBack">←</div>  
      <h1 class="header-title">巡检管理</h1>  
      <div class="header-close">×</div>  
    </header>  

    <!-- 搜索输入框 -->  
    <div class="search-bar">  
      <i class="iconfont icon-search"></i>  
      <input  
        type="text"  
        class="search-input"  
        placeholder="请输入搜索内容"  
        v-model="searchQuery"  
        @input="filterRepairs"  
      />  
    </div>  

    <!-- 条件筛选 -->  
    <div class="filter-bar">  
      <div class="filter-item" @click="toggleDropdown('location')">  
        维修位置  
        <i class="iconfont icon-arrow-down"></i>  
      </div>  
      <div class="filter-item" @click="toggleDropdown('status')">  
        维修状态  
        <i class="iconfont icon-arrow-down"></i>  
      </div>  
      <div class="filter-item" @click="toggleDropdown('urgency')">  
        紧急程度  
        <i class="iconfont icon-arrow-down"></i>  
      </div>  
    </div>  

    <!-- 维修列表 -->  
    <div class="repair-list">  
      <div  
        class="repair-item"  
        v-for="(repair, index) in repairs"  
        :key="index"  
      >  
        <img :src="logo" class="repair-image" alt="维修图片" />  
        <div class="repair-info">  
          <div class="repair-title">  
            设备 ：{{ repair.relatedDevice }}  标题：  {{ repair.title }} 
            <i class="icon-warning" v-if="repair.status==1"></i>  
          </div>  
          <div class="repair-tags">  
            <span :class="'tag unprocessed'" v-if="repair.status == 0 ">未开始</span>  
            <span :class="'tag processed'"  v-if="repair.status == 1 ">进行中</span>  
            <span :class="'tag processing'" v-if="repair.status == 2 ">已完成</span>  
            <span class="tag person">{{ repair.maintenancePersonnel }}</span>  
            <span class="tag date">{{ repair.createdTime }}</span>  
          </div>  
          <div class="repair-location">维修位置：{{ repair.relatedDevice }}</div>  
          <button class="details-button" @click="viewDetails(repair.id)">  
            查看详情  
          </button>  
        </div>  
      </div>  
    </div>  

    <!-- 底部导航栏 -->  
    <BottomNav :activeTab="'repair'" />  
  </div>  
</template>  

<script>  
import BottomNav from "../components/mobileBottomNav.vue";  
import {userList,deviceList,getDepts,getUsers,getSchedules,addCheckingPlan,getFaultDeclaration} from "@/api/wushui/inspection";
import logo from '@/assets/logo/logo.png'
export default {  
  name: "RepairPage",  
  components: {  
    BottomNav,  
  },  
  data() {  
    return {  
      searchQuery: "", // 搜索关键字  
      dropdownOpen: "", // 当前打开的下拉框 ('location', 'status', 'urgency')  
      repairs: [], 
      logo, 
    };  
  },  
  computed: {  
    filteredRepairs() {  
      return this.repairs.filter((repair) =>  
        repair.name.includes(this.searchQuery)  
      );  
    },  
  },  
  created(){
    this.getList();

  },
  methods: {  
     getFaultDeclaration(){
        getFaultDeclaration().then((response) => {
          this.repairs = response.rows;

          console.log(response)
        }).catch(() => {
          this.$message.error("获取数据失败");
        });       
    },
     getList() {
      this.getFaultDeclaration();
    },
    goBack() {  
      alert("返回上一页");  
    },  
    toggleDropdown(type) {  
      this.dropdownOpen = this.dropdownOpen === type ? "" : type;  
    },  
    filterRepairs() {  
      const query = this.searchQuery.toLowerCase();  
      this.repairs = this.repairs.filter((repair) =>  
        repair.name.toLowerCase().includes(query)  
      );  
    },  
    viewDetails(id) {  
      this.$router.push({ path: '/mobileRepairRecord', query: { faultDeclarationId: id } });
    },  
  },  
};  
</script>  

<style scoped>  
/* 页面主样式 */  
.repair-page {  
  font-family: Arial, sans-serif;  
  background-color: #f9f9f9;  
  padding-bottom: 60px; /* 防止被底部导航覆盖 */  
}  

/* 顶部导航 */  
.header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.header-back,  
.header-close {  
  font-size: 18px;  
  cursor: pointer;  
}  

.header-title {  
  font-size: 18px;  
  font-weight: bold;  
  color: #333;  
}  

/* 搜索栏样式 */  
.search-bar {  
  display: flex;  
  align-items: center;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
  gap: 10px;  
}  

.search-input {  
  flex: 1;  
  border: none;  
  font-size: 14px;  
  outline: none;  
  padding: 5px 10px;  
  background: #f9f9f9;  
  border-radius: 5px;  
}  

/* 条件筛选 */  
.filter-bar {  
  display: flex;  
  justify-content: space-between;  
  background: white;  
  padding: 10px 15px;  
  border-bottom: 1px solid #eaeaea;  
}  

.filter-item {  
  position: relative;  
  font-size: 14px;  
  cursor: pointer;  
  color: #333;  
  display: flex;  
  align-items: center;  
}  

.icon-arrow-down {  
  margin-left: 5px;  
}  

/* 维修列表样式 */  
.repair-list {  
  padding: 10px;  
}  

.repair-item {  
  display: flex;  
  gap: 15px;  
  background: white;  
  margin-bottom: 10px;  
  padding: 15px;  
  border-radius: 8px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);  
}  

.repair-image {  
  width: 100px;  
  height: 100px;  
  object-fit: cover;  
  border-radius: 8px;  
}  

.repair-info {  
  flex: 1;  
}  

/* 维修标题和警告图标 */  
.repair-title {  
  font-size: 16px;  
  font-weight: bold;  
  color: #333;  
  display: flex;  
  align-items: center;  
  gap: 5px;  
}  

.icon-warning {  
  color: red;  
}  

/* 标签样式 */  
.repair-tags {  
  margin: 5px 0;  
}  

.tag {  
  font-size: 12px;  
  padding: 2px 8px;  
  border-radius: 4px;  
  margin-right: 5px;  
  color: white;  
}  

.tag.processed {  
  background: #28a745;  
}  


.tag.processing {  
  background: #ffc107;  
  color: black;  
}  

.tag.unprocessed {  
  background: #dc3545;  
}  

.tag.person,  
.tag.date {  
  background: #007bff;  
}  

/* 维修位置文字 */  
.repair-location {  
  font-size: 14px;  
  color: #666;  
}  

.details-button {  
  padding: 5px 10px;  
  background: #007bff;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  

.details-button:hover {  
  background: #0056b3;  
}  
</style>